Label Styling
Label styling works in a very similar manner to control styling described in the Control Styling section. Label styling also includes the Class Names and CSS Override fields to enable you to enter your specific styling information.
Any positional or sizing type styling should be applied to the label background, but more visual properties for the text, such color, font size, etc., should be applied to the label itself. You can actually see this happening if you keep the Label Styling section open and click on the Label Styling palette options. WebMaker will auto-complete the override markup based on its knowledge of the underlying CSS files.
The exact mark-up generated will depend on the container but, as an example, if the field is contained within a table structure, the label background styling will be applied to the table cell containing the label, and the label styling will be applied to the <label> tag within this cell. It is this label tag that will actually contain the label text. For more details on the variations of the actual HTML, please refer to the WebMaker Forum entry: UI Look and Feel - CSS Design Principles and Templates
Table of Frequently Used Label Styles
Class Name | Notes on Use |
label |
This is the default style name for all labels, whether such labels are used for fields, groups or repeats. The label style adapts depending on the item for which the label is used, such as fields, groups or repeats. |
fieldLabel, groupLabel, fieldsetGroupLabel, repeatLabel |
In some circumstances, the label may be rendered differently due to its placement within different containers and you may wish to change the styling of the label to better suit the style of the items that surround the label. In such circumstances, these pre-defined styles should prove useful. This approach is usually used in conjunction with the label background styles mentioned below. |
highlightTextOverdue, highlightTextUrgent, highlightTextCompleted, highlightTextImportant |
Please see earlier section on Control Styling for details on these classes. |
Class Name | Notes on Use |
labelBackground |
This is the default style name for all label Backgrounds whether they are used for fields, groups or repeats. The background style adapts depending on the item for which the label is used, such as fields, groups or repeats. |
fieldLabelBackground, groupLabelBackground, fieldsetGroupLabelBackground, repeatLabelBackground, pagingTableLabelBackground |
In some circumstances, the label may be rendered differently due to its placement within different containers and you may wish to change the styling of the label background to better suit the style of the items that surround the label. In such circumstances, these pre-defined styles should prove useful. This approach is usually used in conjunction with the label styles mentioned above. |
Visibility Styles | |
hide, hideOnScreen, hideOnPrint, hideOnPhone, hideOnPortraitTablet, hideOnLandscapeTablet, invisible, invisibleOnScreen, invisibleOnPrint, invisibleOnPhone, invisibleOnPortraitTablet, invisibleOnLandscapeTablet, showOnScreen, showOnPrint, showOnPhone, showOnPortraitTablet, showOnLandscapeTablet |
Please see earlier section on Control Styling for details on these classes. |